<template>
	<view class="evaluate-page">
		<view class="courses-info" v-if="coursesDetail">
			<image :src="coursesDetail.image" class="item-left"></image>
			<view class="item-right">
				<view class="item-title">{{coursesDetail.name}}</view>
				<view class="item-time">授课老师:{{coursesDetail.teacher_name}}</view>
				<view class="item-price"><text class="unit">￥</text> {{coursesDetail.price}}</view>
			</view>
		</view>
		<view class="evaluate-content">
			<view class="evaluate-item">
				<view class="title">请对老师进行评价</view>
				<u-rate active-color="#F6C178" inactive-color="#b2b2b2" v-model="teacher" size='24'
					gutter="20"></u-rate>
			</view>
			<view class="evaluate-item">
				<view class="title">请对此课程进行评价</view>
				<u-rate active-color="#F6C178" inactive-color="#b2b2b2" v-model="course" size='24' gutter="20"></u-rate>
			</view>
			<view class="content-box">
				<view class="title">给点评价</view>
				<view style="flex: 1;">
					<u-textarea v-model="content" placeholder="点击这里输入评价" type="textarea" :clearable="true"
						border="none"></u-textarea>
				</view>
			</view>
			<view class="image-box">
				<view class="title">添加照片</view>
				<view style="flex: 1;">
					<uploadImage @uploadSuccess='uploadSuccess' name="image_evaluate" :maxCount='6'></uploadImage>
				</view>
			</view>
		</view>
		<view class="confirm" @click="$u.throttle(courseCommentAdd,2000)">提交</view>
	</view>
</template>

<script>
	import uploadImage from '@/components/UploadImage.vue';
	export default {
		data() {
			return {
				teacher: 0, //老师评分
				course: 0, //课程评分
				content: '', //评价内容
				images: "", //评价图片
				pre_id: null, //订单ID
				coursesDetail: null, //课程信息
			}
		},
		onLoad(options) {
			if (options && options.pre_id) {
				this.pre_id = options.pre_id
				this.putCourseComment()
			}
		},
		components: {
			uploadImage: uploadImage
		},
		methods: {
			uploadSuccess(e) {
				if (e.name == 'image_evaluate') {
					this.images = e.fileList
				}
			},
			putCourseComment() {
				this.$Api.courses.putCourseComment({
					pre_id: this.pre_id,
				}).then(res => {
					this.coursesDetail = res.data
				})
			},
			//订单评论
			courseCommentAdd() {
				if (!this.teacher) {
					return this.$Toast('请对老师进行评价')
				}
				if (!this.course) {
					return this.$Toast('请对课程进行评价')
				}
				if (!this.content) {
					return this.$Toast('请填写评价内容')
				}
				this.$Api.courses.courseCommentAdd({
					pre_id: this.pre_id,
					teacher: this.teacher,
					course: this.course,
					content: this.content,
					images: this.images,
				}).then(res => {
					this.$Tips({
						title: '提交评价成功'
					}, {
						tab: 3,
						url: '1'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate-page {
		width: 100%;
		min-height: 100vh;
		background: #F6F6F8;

		.courses-info {
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: #ffffff;

			.item-left {
				width: 156rpx;
				height: 156rpx;
				margin-right: 26rpx;
			}

			.item-right {
				flex: 1;
				height: 156rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-title {
					font-weight: bold;
					font-size: 32rpx;
				}

				.item-time {
					font-size: 26rpx;
					color: #565656;
					margin-top: 6rpx;
				}

				.item-price {
					font-weight: bold;
					font-size: 40rpx;
					color: #FD463E;
					margin-top: 16rpx;

					.unit {
						font-size: 28rpx;
					}
				}
			}
		}



		.evaluate-content {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #ffffff;

			.evaluate-item {
				margin-bottom: 30rpx;

				.title {
					margin-bottom: 20rpx;
					font-size: 28rpx;
				}
			}

			.content-box,
			.image-box {
				display: flex;
				margin-top: 20rpx;

				.title {
					width: 150rpx;
					font-size: 28rpx;
				}

				::v-deep  .u-textarea {
					background-color: #EFEFEF;
				}
			}
		}

		.confirm {
			width: 682rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #ffffff;
			background: #a3c616;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(163, 198, 22, 0.3);
			border-radius: 24rpx;
			font-weight: 500;
			font-size: 34rpx;
			margin: 100rpx auto 0;
		}
	}
</style>